﻿<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script> 
    <style type="text/css">
        .demo-iframe {
            border: none;
            width: 600px;
            height: 400px;
            clear: both;
            display: none;
        }
       .text-input
        {
            height: 23px;
            width: 150px;
        }
        .register-table
        {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .register-table td, 
        .register-table tr
        {
            border-spacing: 0px;
            border-collapse: collapse;
            font-family: Verdana;
            font-size: 12px;
        }
        h3 
        {
            display: inline-block;
            margin: 0px;
        }
       .prompt {
            margin-top: 10px; font-size: 10px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
	$(document).ready(function () {
		var theme = getTheme();
		$('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
		$('#acceptInput').jqxCheckBox({ width: 130, theme: theme });

		$("#ssnInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22, theme: theme });
		$("#phoneInput").jqxMaskedInput({ mask: '(###)###-####', width: 150, height: 22, theme: theme });
		$("#zipInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22, theme: theme });

		$('.text-input').addClass('jqx-input');
		$('.text-input').addClass('jqx-rc-all');
		if (theme.length > 0) {
			$('.text-input').addClass('jqx-input-' + theme);
			$('.text-input').addClass('jqx-widget-content-' + theme);
			$('.text-input').addClass('jqx-rc-all-' + theme);
		}

		var date = new Date();
		date.setFullYear(1985, 0, 1);
		$('#birthInput').jqxDateTimeInput({ theme: theme, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) });

		// initialize validator.
		$('#form').jqxValidator({
			rules: [
			{ input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
			{ input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
			{ input: '#realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
			{ input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
			{ input: '#realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
			{ input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2012.', action: 'valuechanged', rule: function (input, commit) {
				var date = $('#birthInput').jqxDateTimeInput('value');
				$.ajax({
				url: "registration.php",
				type: 'POST',
				data: {birthInputYear: date.dateTime.getFullYear()},
				success: function(data)
				{
					if (data == "true")
					{
						commit(true);
					}
					else commit(false);
				},
				error: function()
				{
					commit(false);
				}
			});
			}
			},
			{ input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
			{ input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
			{ input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
			{ input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input, commit) {
				// call commit with false, when you are doing server validation and you want to display a validation error on this field. 
				if (input.val() === $('#passwordInput').val()) {
					return true;
				}
					return false;
				}
			},
			{ input: '#emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
			{ input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
			{ input: '#ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
			{ input: '#phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
			{ input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' }]
		});

		// validate form.
		$("#sendButton").click(function () {
			var validationResult = function (isValid) {
				if (isValid) {
					$("#form").submit();
				}
			}
			$('#form').jqxValidator('validate', validationResult);
		});

		$("#form").on('validationSuccess', function () {
			$("#form-iframe").fadeIn('fast');
		});
	});
    </script>

    <div style="height: 219px;">
        <form class="form" id="form" target="form-iframe"  method="post" action="registration.php" style="font-size: 13px; font-family: Verdana; width: 650px;">
            <div>
                <h2>Register</h2>
            </div>
	      <table class="register-table">
                    <tr>
                        <td>Username:</td>
                        <td><input name="username" type="text" id="userInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input name="password" type="password" id="passwordInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Confirm password:</td>
                        <td><input type="password" id="passwordConfirmInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Real name:</td>
                        <td><input name="realname" type="text" id="realNameInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Birth date:</td>
                        <td><div name="birthdate" id="birthInput"></div></td>
                    </tr>
                    <tr>
                        <td>E-mail:</td>
                        <td><input name="email" type="text" id="emailInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>SSN:</td>
                        <td><div name="ssn" id="ssnInput"></div></td>
                    </tr>
                    <tr>
                        <td>Phone:</td>
                        <td><div name="phone" id="phoneInput"></div></td>
                    </tr>
                    <tr>
                        <td>Zip code:</td>
                        <td><div name="zip" id="zipInput"></div></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding: 5px;"><div name="acceptterms" id="acceptInput" style="margin-left: 50px;">I accept terms</div></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton" /></td>
                    </tr>
                </table>
            <div class="prompt">*For successful registration, username=admin, password=admin123</div>
        </form>
        <iframe id="form-iframe" name="form-iframe" class="demo-iframe" frameborder="0"></iframe>
    </div>
</body>
</html>

<!--registration.php	
  // check whether the entered year is in the range of 1900 - 2012
  if (isset($_POST["birthInputYear"]))
  {  
    $year = $_POST["birthInputYear"];
     // validate year.
     if ($year > "2012" || $year < "1900")
     {
         echo "false";
     }
     else
     {
        echo "true";
     }
     return;
  }  
  
	$formData = array(
		"username" => $_POST["username"],
		"password" => $_POST["password"],
		"realname" => $_POST["realname"],
		"birthdate" => $_POST["birthdate"],
		"email" => $_POST["email"],
		"ssn" => $_POST["ssn"],
		"phone" => $_POST["phone"],
		"zip" => $_POST["zip"],
		"acceptterms" => $_POST["acceptterms"]
	);
	
  // check whether the terms are accepted.
  if($formData['acceptterms'] != 'true')
  {
      $response = "<p><h1>Registration Not Successful</h1></p><p>You need to accept the terms.</p>";
      echo $response;
      return;
  }
    
  // the registration is successful only if the username is 'admin' and the password is 'admin123'.
  if($formData['username'] == 'admin' && $formData['password'] == 'admin123') {
     $response = "<p><h1>Registration Successful</h1></p><p></p>";
     $response .= "Username:" .$formData['username'] .= "<br/>";
     $response .= "Password:" .$formData['password'] .= "<br/>";
     $response .= "Real name:" .$formData['realname'] .= "<br/>";
     $response .= "Birth date:" .$formData['birthdate'] .= "<br/>";
     $response .= "E-mail:" .$formData['email'] .= "<br/>";
     $response .= "SSN:" .$formData['ssn'] .= "<br/>";
     $response .= "Phone:" .$formData['phone'] .= "<br/>";
     $response .= "Zip code:" .$formData['zip'] .= "<br/>";
  }
  else {
     $response = "<p><h1>Registration Not Successful</h1></p><p>Invalid username or password.</p>";
  }

  echo $response;
-->